<template>
  <div class="dashboard-container">
    <div>
      <el-card>

        <!-- 添加按钮 -->
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          class="fr"
          style="margin-bottom: 20px;"
          @click="onAdd"
        >
          添加菜单
        </el-button>

        <!-- 权限表格 -->
        <el-table
          ref="menusTable"
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          default-expand-all
          :tree-props="{children: 'childs'}"
          highlight-current-row>
          <el-table-column
            type=""
            label="标题"
            width="200">
            <template slot-scope="{row}">
              <i
                :class="iconClass(row)"
                :style="`margin-left: ${row.num*20}px; margin-right: 5px; font-size: 16px;`"
                @click="onToggle(row)"
              ></i>
              <span>{{row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
            type=""
            prop="code"
            label="权限点代码">
          </el-table-column>
          <el-table-column
            type=""
            label="操作"
            width="120">
            <template slot-scope="{row}">
              <el-button plain type="primary" icon="el-icon-edit" circle @click="onEdit(row.id)"></el-button>
              <el-button plain type="danger" icon="el-icon-delete" circle @click="onDelete(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加编辑弹出层 -->
        <menu-add
          ref="menuAdd"
          :text="text"
          pageTitle="菜单"
          @handleCloseModal="closeDialog"
          @newDataes="loadMenusList"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus'
import menuAdd from '../components/menu-add.vue'
export default {
  components: { menuAdd },
  data () {
    return {
      tableData: [],
      menusList: [],
      text: ''
    }
  },

  created () {
    this.loadMenusList()
  },

  methods: {
    // 菜单列表数据加载
    async loadMenusList () {
      const res = await list()
      this.menusList = res.data
      this.tableData = this.menusListHandling(this.menusList, 0)
    },
    // 菜单列表数据处理
    menusListHandling (data, num) {
      const newArr = []
      data.forEach(item => {
        if (item.childs) {
          newArr.push({ ...item, childs: this.menusListHandling(item.childs, num + 1), num })
        } else if (item.points) {
          newArr.push({ ...item, childs: item.points.map(item2 => ({ ...item2, num: num + 1 })), num })
        } else {
          newArr.push({ ...item, num })
        }
      })
      return newArr
    },
    // 图标显示
    iconClass (data) {
      if (data.is_point) return 'ivu-icon  el-icon-view'
      if (data.childs && !data.points) return 'ivu-icon  fa fa-folder-open-o fa-fw'
      return 'ivu-icon fa fa-file-o fa-fw'
    },
    // 树形结构的展开与关闭
    onToggle (row) {
      this.$refs.menusTable.toggleRowExpansion(row)
    },
    // 点击添加
    onAdd () {
      this.text = '创建'
      // 显示弹出层
      this.$refs.menuAdd.dialogFormV()
      this.$refs.menuAdd.handleResetForm()
    },
    // 关闭弹出层
    closeDialog () {
      this.$refs.menuAdd.dialogFormH()
    },
    // 点击编辑
    onEdit (id) {
      this.text = '编辑'
      // 显示弹出层
      this.$refs.menuAdd.dialogFormV()
      this.$refs.menuAdd.hanldeEditForm(id)
      this.$refs.menuAdd.changeType()
    },
    // 点击删除
    onDelete (id) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.loadMenusList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>

</style>
